<template>
  <div class='editreport-container'>

    <el-form :model='editReport'
             label-width="110px">

      <el-row>
        <el-col :span="24">
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="">
          </el-dialog>
          <el-form-item label="上传图片"
                        label-width="110px">
            <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                       list-type="picture-card"
                       :on-preview="handlePictureCardPreview"
                       :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-col :span="18">
            <el-form-item label="质量员"
                          label-width="110px">
              <el-col :span="24"
                      v-for="(item,index) in data"
                      :key="index">
                <el-col :span="24"
                        id="midBox">
                  <el-col :span="7"
                          id="midColContent">
                    <el-select v-model="value"
                               placeholder="请选择">
                      <el-option v-for="item in options"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7"
                          id="midColContent">
                    <el-input v-model="input"
                              :disabled="true"
                              placeholder="请输入内容"></el-input>
                  </el-col>
                  <el-col :span="7"
                          id="midColContent">
                    <el-input v-model="input"
                              :disabled="true"
                              placeholder="请输入内容"></el-input>
                  </el-col>
                  <el-col :span="3"
                          id="midClickBut">
                    <el-button class="el-icon-plus"
                               @click="add"></el-button>
                    <el-button class="el-icon-minus"
                               @click="deleteRow(index)">

                    </el-button>
                  </el-col>
                </el-col>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            &nbsp;
          </el-col>
        </el-col>

        <el-col :span="24">
          <el-col :span="18">
            <el-form-item label="专业监理工作师"
                          label-width="110px">
              <el-col :span="24"
                      v-for="(item,index) in dataMajor"
                      :key="index">
                <el-col :span="24"
                        style="margin-bottom:20px;">
                  <el-col :span="7"
                          id="midColContent">
                    <el-select v-model="value"
                               placeholder="请选择">
                      <el-option v-for="item in options"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7"
                          id="midColContent">
                    <el-input v-model="input"
                              :disabled="true"
                              placeholder="请输入内容"></el-input>
                  </el-col>
                  <el-col :span="7"
                          id="midColContent">
                    <el-input v-model="input"
                              :disabled="true"
                              placeholder="请输入内容"></el-input>
                  </el-col>
                  <el-col :span="3"
                          id="midIconButton">
                    <el-button class="el-icon-plus"
                               @click="addMajor"></el-button>
                    <el-button class="el-icon-minus"
                               @click="deleteRowMajor(index)">

                    </el-button>
                  </el-col>
                </el-col>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            &nbsp;
          </el-col>
        </el-col>
        <el-col :span="24">
          <span>
            检测单位
          </span>
        </el-col>
        <el-col :span="24">
          <el-col :span="7"
                  id="midColContent">
            <el-form-item label="姓名">
              <el-input v-model="input"
                        placeholder="请输入内容">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="17">
            &nbsp;
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="7"
                  id="midColContent">
            <el-form-item label="单位">
              <el-input v-model="input"
                        placeholder="请输入内容">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="17">
            &nbsp;
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="7"
                  id="midColContent">
            <el-form-item label="手机号">
              <el-input v-model="input"
                        placeholder="请输入内容">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="17">
            &nbsp;
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="7"
                  id="footerSelect">
            <el-form-item label="是否合格">
              <el-radio v-model="radio"
                        label="1">备选项</el-radio>
              <el-radio v-model="radio"
                        label="2">备选项</el-radio>
            </el-form-item>

          </el-col>
          <el-col :span="17">
            &nbsp;
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="8"
                  id="footerButtCli">
            <el-button size="small"
                       type="primary">提交</el-button>
            <el-button size="small"
                       @click="onBack">
              返回
            </el-button>
          </el-col>
          <el-col :span="16">
            &nbsp;
          </el-col>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>
<script>
export default {
  data () {
    return {
      radio: '1',
      data: [{}],
      dataMajor: [{}],
      dialogImageUrl: '',
      dialogVisible: false,
      requestParam: {
        page: 1,
        page_size: 10
      },

      editReport: {
        editReport: '',

      }

    }
  },
  methods: {
    //返回事件
    onBack () {
      this.$router.push({
        path: '/reportList'
      })
    },
    //质量员-新增
    add () {
      this.data.push({});
    },
    //质量员-删除
    deleteRow (index) {
      console.log('删除=', index)
      if (this.data.length == 1) {
        this.$message.info('至少保留一组!')
      } else {
        this.data.splice(index, 1);
      }
    },
    //专业监理工作师-新增
    addMajor () {
      this.dataMajor.push({});
    },
    //专业监理工作师-删除
    deleteRowMajor (index) {
      if (this.dataMajor.length == 1) {
        this.$message.info('至少保留一组!')
      } else {
        this.dataMajor.splice(index, 1);
      }
    },
    handlePageChange (page) {

    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
#midIconButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#footerButtCli {
  text-align: center;
}
#footerSelect {
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#midClickBut {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#midColContent {
  padding-right: 20px !important;
}
#midBox {
  margin-bottom: 20px;
}
.editreport-container {
}
</style>
